<template>
  <div class="search-con">
    <div class="s-box">
      <div class="search-box">
        <el-input
          placeholder="请输入关键词查询"
          v-model="searchTxt"
          @keydown.enter.native="search"
          class="elinp"
        >
          <div slot="prefix">
            <el-dropdown trigger="click" placement="bottom" @command="handleCommand">
              <span class="el-dropdown-link">
                {{currentDropdownName}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="姓名">姓名</el-dropdown-item>
                <el-dropdown-item command="任职企业">任职企业</el-dropdown-item>
                <el-dropdown-item command="优势领域">优势领域</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-input>
        <el-button
          slot="append"
          @click="search"
          class="search-button"
        >搜索</el-button>
      </div>
    </div>
    <dl class="item-box">
      <dd>
        <span class="label">按产业筛选：</span>
        <div class="tag-box">
          <el-tag
            v-for="(item, index) in industryTagList" 
            :key="index"
            closable
            :disable-transitions="false"
            @click="search"
            @close="removeItem('industry', item)">
            {{item}}
          </el-tag>
          <el-input 
            ref="saveIndustryTag" 
            v-if="industryTagVisable" 
            v-model="industryTagNewTag" 
            size="small"
            class="input-new-tag"
            @keyup.enter.native="handleAddNewTag('industry')"
            @blur="handleAddNewTag('industry')">
          </el-input>
          <el-button v-else size="small" icon="el-icon-plus" class="button-new-tag" @click="showTagInp('industry')">产业标签</el-button>
        </div>
      </dd>
      <dd>
        <span class="label">按领域筛选：</span>
        <div class="tag-box">
          <el-tag
            v-for="(item, index) in fieldTagList" 
            :key="index"
            closable
            :disable-transitions="false"
            @click="search"
            @close="removeItem('field', item)">
            {{item}}
          </el-tag>
          <el-input 
            ref="saveFieldTag" 
            v-if="fieldTagVisable" 
            v-model="fieldTagNewTag" 
            size="small"
            class="input-new-tag"
            @keyup.enter.native="handleAddNewTag('field')"
            @blur="handleAddNewTag('field')">
          </el-input>
          <el-button v-else size="small" icon="el-icon-plus" class="button-new-tag" @click="showTagInp('field')">学术领域</el-button>
        </div>
      </dd>
      <dd>
        <span class="label">按区域筛选：</span>
        <div class="tag-box has-more hide-more" :class="{'show-more': itemMore['区域']}">
          <el-tag v-for="(item, index) in areaList" :key="index" class="bg2" @click="search">{{item.label}}</el-tag>
        </div>
        <div @click="handleChangeItemMore('区域')" class="more-btn">
          <span>更多</span>
          <i :class="{'el-icon-caret-bottom': !itemMore['区域'], 'el-icon-caret-top': itemMore['区域']}"></i>
        </div>
      </dd>
    </dl>
    <dl class="news-panel">
      <dd class="panel-1">
        <h4>今日明星</h4>
        <vue-seamless-scroll
          :data="topNewsData"
          :class-option="alertsClassOption"
          class="warp"
        >
          <ul>
            <li
              v-for="(item, index) in topNewsData"
              :key="index"
            >
              <img
                src="../../../../assets/img/icon-1.png"
                alt=""
              />{{
                item.title
              }}
            </li>
          </ul>
        </vue-seamless-scroll>
      </dd>
      <dd class="panel-2">
        <h4>实力大咖</h4>
        <TagCloud />
      </dd>
    </dl>
  </div>
</template>

<script>
import TagCloud from './TagCloud.vue'
export default {
  components: {
    TagCloud
  },
  data() {
    return {
      searchTxt: "",
      topNewsData: [],
      topExpertsData: [],
      alertsClassOption: {
        hoverStop: true, // 禁用鼠标悬停停止
        isSingleRemUnit: true, // 是否开启 rem 度量
        singleHeight: 0.42, // 单步运动停止的高度
        waitTime: 2000, // 单步停止等待时间
      },
      currentDropdownName: '姓名',
      // 按产业筛选
      industryTagList: ['多晶硅', 'PET基膜', '光伏发电', '蓄电池'],
      industryTagVisable: false,
      industryTagNewTag: '',
      // 按领域筛选
      fieldTagList: ['电池的导电联接', '二次电池及制造', '电性能测试'],
      fieldTagVisable: false,
      fieldTagNewTag: '',
      areaList: [], // 按区域筛选
      // 更多
      itemMore: {
        '区域': false
      },
    };
  },
  mounted() {
    this.searchTxt = this.$route.query.keyword
    this.areaSelect()
    this.getNews();
  },
  methods: {
    getNews() {
      this.topNewsData = [];
      this.$get(this.$Url.EnergyTalent.topNews).then((res) => {
        this.topNewsData = res.data;
      });
    },
    search() {
      if (this.searchTxt === "") {
        this.$message({
          type: "warning",
          message: "请输入关键词",
          duration: 1000,
        });
        return;
      }
      this.$router.push({
        name: "PDSearchResult",
        query: {
          keyword: this.searchTxt,
          ipi: 1
        },
      });
    },

    // 切换下拉菜单项 
    handleCommand(command) {
      this.currentDropdownName = command
    },
    // 添加产业筛选项/领域筛选项
    handleAddNewTag(str) {
      if (str === 'industry') {
        if (this.industryTagNewTag !== '') {
          this.industryTagList.push(this.industryTagNewTag)
        }
        this.industryTagVisable = false
        this.industryTagNewTag = ''
      } else if (str === 'field') {
        if (this.fieldTagNewTag !== '') {
          this.fieldTagList.push(this.fieldTagNewTag)
        }
        this.fieldTagVisable = false
        this.fieldTagNewTag = ''
      }
    },
    // 展示添加产业/领域筛选项输入框
    showTagInp(str) {
      if (str === 'industry') {
        this.industryTagVisable = true
        this.$nextTick(() => {
          this.$refs.saveIndustryTag.$refs.input.focus()
        })
      } else if (str === 'field') {
        this.fieldTagVisable = true
        this.$nextTick(() => {
          this.$refs.saveFieldTag.$refs.input.focus()
        })
      }
    },
    // 删除产业/领域筛选项
    removeItem(str, item) {
      if (str === 'industry') {
        this.industryTagList.splice(this.industryTagList.indexOf(item), 1)
      } else if (str === 'field') {
        this.fieldTagList.splice(this.fieldTagList.indexOf(item), 1)
      }
    },
    // 切换单项更多展示
    handleChangeItemMore(str) {
      this.itemMore[str] = !this.itemMore[str]
    },
    // 省市
    areaSelect() {
      this.$post(this.$Url.patent.regionInfo, {
        supId: "000000", // 根据上级ID查询所属下级机构，最顶级criCode是 000000  苏州320000
      })
        .then((res) => {
          if (res.data) {
            res.data.forEach((i) => {
              this.areaList.push({
                value: i.criCode,
                label: i.criName,
              });
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.search-con {
  height: calc(100vh - .7rem);
  width: 100%;
  background: url("../../../../assets/img/search-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  overflow-y: auto;
}
.s-box {
  position: relative;
  z-index: 2;
  width: 9.3rem;
  padding-top: 1rem;
  margin: 0 auto;
  .search-box {
    position: relative;
    width: 100%;
    display: flex;
    .elinp {
      position: relative;
      ::v-deep {
        .el-input__inner {
          height: 0.54rem;
          line-height: 0.54rem;
          padding-left: 1.3rem;
          border-color: $mainColor;
          border-radius: 0.08rem;
          font-size: 0.18rem;
          color: #283146;
          &:focus {
            border-color: $mainColor;
          }
        }
        .el-input__prefix {
          width: 1.1rem;
          height: calc(0.54rem - 2px);
          line-height: calc(0.53rem - 2px);
          margin-top: 1px;
          border-right: 1px solid #dbdef2;
          .el-dropdown-link {
            font-size: .16rem;
          }
        }
      }
      .search-icon {
        position: absolute;
        top: 0;
      }
    }
    .search-button {
      width: 0.94rem;
      height: 0.54rem;
      border-radius: 0.08rem;
      font-size: 0.18rem;
      color: #fff;
      background-color: $mainColor;
      margin-left: 0.14rem;
    }
  }
}
.item-box {
  position: relative;
  z-index: 2;
  width: 9.3rem;
  padding-top: .3rem;
  padding-bottom: .3rem;
  margin: 0 auto;
  dd {
    display: flex;
    width: 100%;
    .label {
      width: 100px;
      line-height: 30px;
      font-size: 14px;
    }
    .elinp {
      width: calc(100% - 100px);
    }
    .elselect {
      width: calc(100% - 100px);
      max-width: 240px;
    }
    .tag-box {
      width: calc(100% - 100px);
      &.has-more {
        width: calc(100% - 160px);
      }
      ::v-deep {
        .el-tag {
          border-color: #d9ecff;
          margin-right: 10px;
          margin-bottom: 10px;
          color: $mainColor;
          background-color: #ecf5ff;
          cursor: pointer;
          &.bg2 {
            background-color: #fff;
          }
          .el-tag__close {
            color: $mainColor;
            transform: scale(1) !important;
            &:hover {
              color: #fff;
              background-color: $mainColor;
            }
          }
        }
        .el-tag--medium {
          height: 32px;
          line-height: 30px;
        }
        .button-new-tag {
          height: 32px;
          line-height: 30px;
          padding-top: 0;
          padding-bottom: 0;
          margin-right: 10px;
          margin-bottom: 10px;
        }
        .input-new-tag {
          width: 90px;
          // height: 30px;
          margin-right: 10px;
          font-size: 12px;
          vertical-align: center;
        }
      }
      &.hide-more {
        height: 34px;
        overflow: hidden;
      }
      &.show-more {
        height: auto;
      }
    }
    .more-btn {
      width: 60px;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
      color: #606266;
      cursor: pointer;
    }
  }
}
.news-panel {
  width: 9.3rem;
  height: 4.32rem;
  background: #fff;
  border-radius: 0.08rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.09rem 0;
  box-shadow: 0 0.02rem 0.12rem 0 rgba(0, 0, 0, 0.1);
  dd {
    height: 100%;
    overflow: hidden;
    padding: 0 0.4rem;
    position: relative;
    display: flex;
    flex-direction: column;
    h4 {
      font-weight: 700;
      font-size: 0.16rem;
      line-height: 0.38rem;
      color: #1e243e;
    }
    .warp {
      width: 100%;
      height: calc(0.6rem * 7);
      overflow: hidden;
      ul {
        list-style: none;
        padding-bottom: 0.1rem;
        li {
          display: block;
          width: 100%;
          line-height: 0.42rem;
          font-size: 0.14rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #686c7f;
          img {
            width: 0.1rem;
            height: 0.1rem;
            margin-right: 0.1rem;
          }
        }
      }
    }
  }
  .panel-1 {
    flex: auto;
    &::after {
      content: "";
      height: calc(100% - 0.3rem);
      width: 1px;
      background: #f3f4f6;
      position: absolute;
      top: 0.15rem;
      right: 0;
    }
  }
  .panel-2 {
    width: 3.48rem;
    flex: none;
    .tag-cloud {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
